﻿﻿﻿{%extends 'blocks/base.html'%}
{% load static %}
{%block title%}首页{%endblock%}
{%block body%}
<div class="admin-main">

    <blockquote class="layui-elem-quote">
        <form class="layui-form" action="" style="display: inline-block">
            <div class="layui-input-inline">
                <select name="quiz3">
                    <option value="">所属产品-请选择-</option>
                    {% for item in products %}
                    <option value="{{item.id}}">{{item.name}}</option>
                    {%endfor%}
                </select>
            </div>
        </form>
        <a onclick="show()" class="layui-btn layui-btn-small" id="import" style="margin-left: 30px;">
            <i class="layui-icon">&#xe608;</i> 添加环境
        </a>
        <!--<a href="#" class="layui-btn layui-btn-small">

            <i class="fa fa-shopping-cart" aria-hidden="true"></i> 导出信息
        </a>
        <a href="#" class="layui-btn layui-btn-small" id="getSelected">
            <i class="fa fa-shopping-cart" aria-hidden="true"></i> 获取全选信息
        </a>
        <a href="javascript:;" class="layui-btn layui-btn-small" id="search">
            <i class="layui-icon">&#xe615;</i> 搜索
        </a>-->

    </blockquote>
    <fieldset class="layui-elem-field">
        <legend>数据列表</legend>
        <div class="layui-field-box layui-form">
            <table class="layui-table admin-table">
                <thead>
                <tr>
                    <th style="width: 30px;"><input id="getSelected" type="checkbox" lay-filter="allselector"
                                                    lay-skin="primary"></th>
                    <th>所属产品</th>
                    <th>环境名称</th>
                    <th>域名</th>
                    <th>数据库配置</th>

                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="content">
                {% for item in datas %}
                <tr>
                    <td><input type="checkbox" lay-skin="primary"></td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.env }}</td>
                    <td>{{ item.domain }}</td>
                    <td>{{ item.db_config }}</td>
                    <td>
                        <a target="_blank" class="layui-btn layui-btn-normal layui-btn-mini"
                           onclick="conn({{item.id}})">测试连接</a>
                        <a href="javascript:;" data-id="1" data-opt="del"
                           class="layui-btn layui-btn-danger layui-btn-mini">删除</a>
                        <a href="javascript:;" data-name="{{ item.name }}" data-opt="edit"
                           class="layui-btn layui-btn-mini">禁用</a>
                    </td>
                </tr>
                {%endfor%}

                </tbody>
            </table>
        </div>
    </fieldset>
    <div class="admin-table-page">
        <div id="paged" class="page">
        </div>
    </div>
</div>

<script>
    layui.use(['form', 'layedit', 'laydate', 'layer'], function () {

    });

    function conn(id) {
        layer.load();
        $.post("{%url 'common:connect'%}", {id: id}, function (data) {
            if (data.code != 200) {
                layer.msg(data.message);
            } else {
                layer.msg('连接成功');
            }
            setTimeout(function () {
                layer.closeAll();
            }, 2000);

        }, 'json')
    }
    function show(id) {
        layer.config({
            anim: 1, //默认动画风格
            skin: 'layui-layer-molv' //默认皮肤
        });
        var index = layer.open({
            type: 2 //此处以iframe举例
            , title: typeof id == "undefined" ? '添加' : '修改'
            , area: ['1000px', '500px']
            , shade: 0.5
            , maxmin: true
            , content: "{%url 'common:show'%}?id=" + (typeof id == "undefined" ? '' : id)
            , zIndex: layer.zIndex
        });
        layer.iframeAuto(index)
    }

</script>
{%endblock%}